<mat-card class="card">
  <mat-card-header>
    <h3 mat-card-title>
      {{ 'Access' | translate }}
    </h3>
  </mat-card-header>

  @if (user(); as user) {
    <mat-card-content>
      <div class="content-wrapper last-login">
        <span class="label">
          <!-- TODO: Add real data once it's available -->
          {{ 'Last Login' | translate }}:
          {{ 'N/A' | translate }}
        </span>

        <a [ixTest]="['search-logs', user.username]" (click)="viewLogs()">
          {{ 'Search Logs' | translate }}
        </a>
      </div>

      <div class="divider"></div>

      <div class="content-wrapper" [ngClass]="{ 'not-available': user.password_disabled }">
        <ix-icon name="mdi-key-variant"></ix-icon>
        <span class="label">
          @if (user.password_disabled) {
            {{ 'No Password' | translate }}
          } @else {
            {{ 'Has Password' | translate }}
            @if (user.password_change_required) {
              <span>{{ ' - ' }}</span>
              <span>{{ 'Change Required' | translate }}</span>
            }
          }
        </span>
      </div>

      <div class="content-wrapper with-break" [ngClass]="{ 'not-available': !user.twofactor_auth_configured }">
        <ix-icon name="mdi-cellphone-lock"></ix-icon>
        <span class="label">
          @if (user.twofactor_auth_configured) {
            {{ 'Has Two-Factor Authentication' | translate }}
          } @else {
            {{ 'No Two-Factor Authentication' | translate }}
          }
        </span>
      </div>

      <div class="content-wrapper" [ngClass]="{ 'not-available': !user.smb }">
        <ix-icon name="ix-smb-share"></ix-icon>
        <span class="label">
          @if (user.smb) {
            {{ 'Has SMB Access' | translate }}
          } @else {
            {{ 'No SMB Access' | translate }}
          }
        </span>
      </div>

      <div class="content-wrapper" [ngClass]="{ 'not-available': !rolesAccessStatus() }">
        <ix-icon name="ix-truenas-logo-mark"></ix-icon>
        <span class="label">
          @if (rolesAccessStatus(); as rolesStatus) {
            {{ 'TrueNAS Access' | translate }}:
            {{ rolesStatus }}
          } @else {
            {{ 'No TrueNAS Access' | translate }}
          }
        </span>
      </div>

      <div class="content-wrapper">
        <div class="flex-container" [ngClass]="{ 'not-available': !user.api_keys?.length }">
          <ix-icon name="mdi-power-plug"></ix-icon>
          <span class="label">
            @if (user.api_keys?.length) {
              {{ 'Api Keys' | translate }}:
              {{ '{n, plural, =0 {No keys} =1 {# key} other {# keys}}' | translate: { n: user.api_keys.length } }}
            } @else {
              {{ 'No API Keys' | translate }}
            }
          </span>
        </div>

        <a [ixTest]="['add-api-key', user.username]" (click)="viewApiKeys()">
          {{ user.api_keys?.length ? ('View API Keys' | translate) : ('Add API Key' | translate) }}
        </a>
      </div>

      <div class="content-wrapper">
        <ix-icon name="mdi-powershell"></ix-icon>
        <span class="label">
          @if (user.shell) {
            {{ 'Shell Access' | translate }}: {{ user.shell }}
          } @else {
            {{ 'No Shell Access' | translate }}
          }
        </span>
      </div>

      <div class="content-wrapper" [ngClass]="{ 'not-available': !sshAccessStatus() }">
        <ix-icon name="mdi-ssh"></ix-icon>
        <span class="label">
          @if (sshAccessStatus(); as sshStatus) {
            {{ sshStatus }}
          } @else {
            {{ 'No SSH Access' | translate }}
          }
        </span>
      </div>
    </mat-card-content>

    <mat-card-actions>
      <button
        *ixRequiresRoles="[Role.AccountWrite]"
        mat-button
        [ixTest]="['toggle-lock-status', user.username]"
        (click)="toggleLockStatus()"
      >
        {{ user.locked ? unlockUserText : lockUserText }}
      </button>
    </mat-card-actions>
  }
</mat-card>

